<template>
    <transition name="move">
        <div class="mineApply" v-show="mineApplyFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <scroll class="mine-apply-container" :data="applyList">
                <div>
                    <ul class="mine-apply-item">
                        <!-- v-show="success ? item.type === 1 : item.type === flag" -->
                        <router-link :to="'activityText/'+item.actid" tag="li" class="mine-apply-list" v-for="(item, index) in applyList" :key="index" v-show="success ? item.status === '1' : item.status === flag">
                            <div class="left">
                                <img class="img" :src="item.coverimg" alt="" />
                            </div>
                            <div class="middle">
                                <div class="apply-list-title">{{item.title}}</div>
                                <div class="start-wrapper">
                                    <div class="start-text">
                                        <i class="icon"></i>
                                        <span class="text">开始时间</span>
                                    </div>
                                    <div class="start-time">
                                        <span class="start-date">{{item.startdate}}</span>
                                        <span class="start-hour">{{item.starttime}}</span>
                                    </div>
                                    <div class="end-text">
                                        <i class="icon"></i>
                                        <span class="text">结束时间</span>
                                    </div>
                                    <div class="end-time">
                                        <span class="end-date">{{item.enddate}}</span>
                                        <span class="end-hour">{{item.endtime}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right" v-show="item.status=== '1'">
                                <span class="btn success" @click.stop="applyTicket(item.actid)">查看门票</span>
                            </div>
                        </router-link>
                    </ul>
                </div>
                <!-- 请求数据loading -->
                <!-- <div class="loading-wrapper" v-show="!applyList.length">
                    <loading></loading>
                </div> -->
            </scroll>
            <!-- 暂无报名信息 -->
            <div class="mine-apply-none" v-show="!applyList.length">
                <a href="javascript:;" class="mine-apply-none-btn"></a>
            </div>
            <div class="no-success" v-show="!arrSuccess.length && !flag && applyList.length">
                <span class="text">暂时没有报名成功的活动</span>
            </div>
            <div class="no-check" v-show="!arrCheck.length && flag === '-1' && applyList.length">
                <span class="text">暂时没有需要审核的活动</span>
            </div>
            <div class="no-decline" v-show="!arrDecline.length && flag === 2 && applyList.length">
                <span class="text">暂时没有已结束的活动</span>
            </div>
            <div class="mine-apply-fixed">
                <div class="mine-apply-item" v-for="(item,index) in applyActive" :key="index" :class="{active:index===insActive}" @click="checkApply(index)">{{item}}</div>
            </div>
            <mine-ticket-detail ref="ticketDetailFlag" :ticketDetailList="ticketDetailList"></mine-ticket-detail>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import MineTicketDetail from 'pages/mine/components/mine-ticket/mineTicketDetail'

    export default {
        data () {
            return {
                returnShow: true,
                mineApplyFlag: false,
                title: '我的报名',
                success: true,
                truename: "",
                id: 0,
                flag: 0,
                applyActive: ["报名成功","待审核","已结束"],
                insActive: 0,
                applyList: [],
                ticketDetailList: {},
                arrSuccess: [],
                arrCheck: [],
                arrDecline: []
            }
        },
        methods: {
            show () {
                this.mineApplyFlag = true
            },
            hide () {
                this.mineApplyFlag = false
            },
            arrLength () {
                for (var i=0;i<this.applyList.length;i++) {
                    if (this.applyList[i].status === '-1') {
                        this.arrCheck.push(this.applyList[i].status)
                    }
                    if (this.applyList[i].status === '1') {
                        this.arrSuccess.push(this.applyList[i].status)
                    }
                    if (this.applyList[i].status === '2') {
                        this.arrDecline.push(this.applyList[i].status)
                    }
                }
            },
            checkApply (index) {
                this.insActive = index
                if (index === 0) {
                    this.success = true
                    this.flag = 0
                }
                if (index === 1) {
                    this.success = false
                    this.flag = '-1'
                }
                if (index === 2) {
                    this.success = false
                    this.flag = 2
                }
            },
            applyTicket (id) {
                for (var i=0;i<this.applyList.length;i++) {
                    if (Number(id) === Number(this.applyList[i].actid)) {
                        this.ticketDetailList = this.applyList[i]
                    }
                }
                this.$refs.ticketDetailFlag.show()
            },
            getApplyInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=myactsublist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid")
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.applyList = res.data.data
                        if (this.applyList.length > 0) {
                            this.arrLength()
                        }
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {MTitle,Loading,Scroll,MineTicketDetail},
        created() {
            this.getApplyInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    .mineApply
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #fff
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .mine-apply-none
            position: absolute
            width: 100%
            top: 50%
            transform: translateY(-50%)
            z-index: 9
            .mine-apply-none-btn
                background: url('./icon3.png') no-repeat
                width: 191px
                height: 36px
                background-size: 100% 100%
                display: block
                margin: 0 auto
        .no-success,.no-check,.no-decline
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
            text-align: center
            left: 0
            right: 0
            .text
                font-size: 18px
                color: #0094d3
        .mine-apply-fixed
            position: fixed
            bottom: 0
            height: 40px
            display: flex
            width: 100%
            line-height: 40px
            border-top: 1px solid #eee
            box-sizing: border-box
            .mine-apply-item
                flex: 1
                text-align: center
                color: #000
                background: #fff
                &.active
                    background: #0094d4
                    color: #fff
        .mine-apply-container
            position: absolute
            top: 50px
            bottom: 40px
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .mine-apply-item
                width: 100%
                .mine-apply-list
                    width: 100%
                    height: 110px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    overflow: hidden
                    position: relative
                    .left
                        flex: 0 0 100px
                        width: 100px
                        margin-right: 10px
                        .img
                            width: 100px
                    .middle
                        flex: 1
                        ellipsis()
                        .apply-list-title
                            width: 100%
                            font-size: 14px
                            ellipsis()
                        .start-wrapper
                            margin-top: 6px
                            .start-text,.end-text
                                font-size: 0
                                .icon
                                    background: url('./icon1.png') no-repeat
                                    width: 9px
                                    height: 9px
                                    background-size: 100% 100%
                                    display: inline-block
                                .text
                                    font-size: 14px
                                    color: #0094d4
                                    display: inline-block
                                    margin-left: 6px
                            .start-time,.end-time
                                font-size: 0
                                margin-top: 4px
                                .start-date,.end-date
                                    font-size: 14px
                                    color: #d40000
                                .start-hour,.end-hour
                                    font-size: 14px
                                    color: #d40000
                                    margin-left: 10px
                            .end-text
                                margin-top: 4px
                                .icon
                                    background: url('./icon2.png') no-repeat
                                    background-size: 100% 100%
                                .text
                                    color: #888
                            .end-time
                                .end-date,.end-hour
                                    color: #888
                    .right
                        position: absolute
                        right: 0
                        top: 43px
                        .btn
                            width: 66px
                            height: 24px
                            background: #d40000
                            border-radius: 20px
                            color: #fff
                            display: block
                            text-align: center
                            line-height: 24px
                            font-size: 14px
                            &.success
                                background: #73ae00
</style>